<template>
  <view class="goodsNav">
    <view class="navWrap">
      <view class="shopWrap" @click="toShop">
        <text class="iconfont icon-shop"></text>
        <text class="shop">积分商城</text>
      </view>
      <text class="line"></text>
      <view class="cartWrap" @click="toCart">
        <text class="badge" v-if="this.cartLength != 0">{{cartLength}}</text>
        <text class="iconfont icon-gouwuchekong"></text>
        <text class="cart">购物车</text>
      </view>
      <view class="btn">
		<view class="addCart" @click="declick('cart')">
			<text>加入购物车</text>
		</view>
        <view class="buy" @click="declick('buy')">
			<text>立即购买</text>
		</view>
      </view>
    </view>
    <view class="mask" @click="declick" v-show="onOff"></view>
    <view class="buyWrap" :animation="animationData">
		<view class="proWrap">
			<view class="picWrap">
			  <image :src="goods.coverPic"></image>
			</view>
		<view class="proInfo">
			<text class="title">{{goods.title}}</text>
			<text class="price">{{goods.price}}积分</text>
		</view>
			<text class="iconfont icon-iconclose" @click="declick"></text>
		</view>
		<view class="buyNum">
			<text class="info">兑换数量:</text>
			<u-number-box v-model="proNum"
				@change="numChange"
				disabledInput
				buttonSize="24"
				color="#ffffff"
				bgColor="rgba(31, 182, 131,0.8)"
				iconStyle="color: #fff">
			</u-number-box>
		</view>
		<view class="confirmWrap">
			<u-button type="success" text="确认" @click="submit"></u-button>
		</view>
    </view>
  </view>
</template>

<script >
	import {checkToken,checkAuth} from '@/common/checkAuth'
export default {
  data () {
    return {
      animation: '',
      animationData: {},
      onOff: false,
      proNum:1,
      status:'',
      cartLength:0,
	  cartList:[]
    }
  },
  props:{
    goods:{
      type:Object,
      default(){
        return {}
      }
    },
    pid:{
      type:String,
      default:''
    }
  },
  mounted () {
    var animation = uni.createAnimation({
      transformOrigin: "50% 50% 0",
      duration: 100,
      timingFunction: 'linear',
    })
    this.animation = animation
	this.getCart()
  },
  computed: {
  	token() {
  		return this.$store.state.auth.token
  	}
  },
  wathch:{
	token(){
		this.getCart()
	}
  },
  methods: {
    declick (val) {
		if(checkToken()){
			if (!this.onOff) {
				this.show()
			} else {
				this.hide()
			}
			this.onOff = !this.onOff
			this.status = val
		}	
    },
    show () {
      this.animation.bottom(0).step()
      this.animationData = this.animation.export()
    },
    hide () {
      this.animation.bottom(-240).step()
      this.animationData = this.animation.export()
    },
    numChange(e){
      this.proNum = e.value
    },
	async getCart(){
		if(checkAuth()){
			const {code,data} = await this.$axios.api.getCart()
			if(code === 200){
				this.cartList = data
				this.cartLength = data.length
			}
		}
	},
    async submit(){
      if(this.status === 'cart'){
		const currentCart = this.cartList.find(item=>{
			return item.pid._id === this.pid
		})
		let cartId = ''
		console.log(currentCart)
		if(currentCart !== undefined){
			cartId = currentCart._id
		}
        const {code,data}= await this.$axios.api.newAddCart({
			cartId:cartId,
			number:this.proNum,
			pid:this.pid
        })
		if(code === 200){
			this.getCart()
			this.declick()
			uni.showToast({
			  title: '添加成功',
			  duration:2000,
			  icon:'success'
			})
		}
      }else if(this.status === 'buy'){
        this.goods.number = this.proNum
        let goods = []
        goods.push(this.goods)
        this.$store.commit('giveGoods',goods)
        uni.navigateTo({
          url:'/subcom-shop/OrderConfirm/OrderConfirm'
        })
      }
    },
    toCart(){
      uni.switchTab({
        url:'/pages/Cart/Cart'
      })
    },
    toShop(){
      uni.switchTab({
        url:'/pages/Shop/Shop'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.goodsNav {
	width: 100%;
	.navWrap {
		width: 100%;
		height: 80rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		background-color: rgb(229, 241, 238);
		border-radius: 10rpx 10rpx 0 0;
    .line {
      width: 1rpx;
      height: 50rpx;
      line-height: 50rpx;
      background-color: rgb(28, 114, 85);
    }
    .shopWrap,
    .cartWrap {
      width: 120rpx;
      height: 80rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      font-size: 24rpx;
      color: rgb(70, 70, 70);
      padding: 10rpx;
      box-sizing: border-box;
      .iconfont {
        font-size: 40rpx;
      }
    }
    .cartWrap {
      position: relative;
      .badge {
        width: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        text-align: center;
        border-radius: 50%;
        background-color: rgb(233, 9, 39);
        color: #fff;
        font-size: 20rpx;
        position: absolute;
        top: 0;
        right: 20rpx;
      }
    }
    .btn {
      flex: 1;
      height: 80rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .addCart,.buy {
		width: 50%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 24rpx;
		color: #EFEFEF;
      }
	  .addCart{
		background-color: #ffaa00;
		border-radius: 30rpx 0 0 30rpx;
      }
	  .buy{
		background-color: #ff0000;
		border-radius: 0 30rpx 30rpx 0;
	  }
    }
  }
	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 99;
	}
	.buyWrap {
		width: 100%;
		height: 200px;
		background-color:#fff;
		position: fixed;
		bottom: -240px;
		left: 0;
		z-index: 100;
		border-radius: 10px 10px 0 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.proWrap{
			width: 100%;
			height: 60px;
			padding: 0 20px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.picWrap{
				position: relative;
				top: -22px;
				width: 110px;
				height: 100px;
				// border: 1px solid rgb(136, 136, 136);
				box-shadow: 1px 1px 1px 1px rgba(136, 136, 136,0.2);
				padding: 2px;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 5px 5px 0 0;
				image{
				  width: 100%;
				  height: 100%;
				}
			}
			.proInfo{
				flex: 1;
				height: 60px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding:0 60rpx;
				box-sizing: border-box;
				.title{
				  font-size: 30rpx;
				  font-weight: bold;
				  color: rgb(88, 88, 88);
				}
				.price{
				  font-size: 30rpx;
				  font-weight: bold;
				  color: rgb(245, 116, 29);
				}
			}
			.iconfont{
				font-size: 32rpx;
			}
		}		
		.buyNum{
			width: 100%;
			height: 40px;
			padding:0 20px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.info{
				margin-right: 20rpx;
				line-height: 40px;
				font-size: 28rpx;
			}
		}
	}	
}
</style>
